<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<link rel="stylesheet" type="text/css" href="/skin/css/amazeui.min1.css" />
	<link href="/user/css/style.css" rel="stylesheet" type="text/css" />
	<script src="/user/js/jquery.js"></script>
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
	<title>我的银行卡-会员中心</title>
	<style>
		/* 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值 */
		a{-webkit-tap-highlight-color:transparent;outline:none;}
		body{background:#f3f5f8;}
		
		/* 页面容器 */
		.bank-container{
			padding:0.16rem;
		}
		
		/* 银行卡列表 */
		.bank-list{}
		
		/* 银行卡项 */
		.bank-card{
			background:#fff;
			border-radius:0.12rem;
			padding:0.2rem;
			margin-bottom:0.12rem;
			box-shadow:0 0.02rem 0.08rem rgba(0,0,0,0.04);
			position:relative;
		}
		
		/* 银行卡头部 */
		.bank-header{
			display:flex;
			justify-content:space-between;
			align-items:flex-start;
			margin-bottom:0.16rem;
		}
		
		.bank-logo{
			width:0.48rem;
			height:0.48rem;
			background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border-radius:0.08rem;
			display:flex;
			align-items:center;
			justify-content:center;
			color:#fff;
			font-size:0.16rem;
			font-weight:700;
			flex-shrink:0;
		}
		
		.bank-info{
			flex:1;
			margin-left:0.12rem;
		}
		
		.bank-name{
			font-size:0.16rem;
			font-weight:700;
			color:#1e293b;
			margin-bottom:0.04rem;
		}
		
		.bank-holder{
			font-size:0.13rem;
			color:#64748b;
		}
		
		.bank-edit-btn{
			width:0.6rem;
			height:0.3rem;
			background:#f1f5f9;
			border:0.01rem solid #e5e7eb;
			border-radius:0.06rem;
			font-size:0.13rem;
			color:#64748b;
			text-decoration:none;
			display:flex;
			align-items:center;
			justify-content:center;
			-webkit-tap-highlight-color:transparent;
		}
		.bank-edit-btn:active{
			background:#e5e7eb;
		}
		
		/* 银行卡号 */
		.bank-number{
			font-size:0.18rem;
			font-weight:600;
			color:#1e293b;
			letter-spacing:0.02rem;
			margin-bottom:0.16rem;
		}
		
		/* 银行卡操作 */
		.bank-actions{
			display:flex;
			gap:0.12rem;
			padding-top:0.16rem;
			border-top:0.01rem solid #f1f5f9;
		}
		
		.bank-action-btn{
			flex:1;
			height:0.36rem;
			border:none;
			border-radius:0.06rem;
			font-size:0.13rem;
			font-weight:600;
			cursor:pointer;
			-webkit-tap-highlight-color:transparent;
			text-decoration:none;
			display:flex;
			align-items:center;
			justify-content:center;
		}
		
		.btn-default{
			background:#253043;
			color:#fff;
		}
		.btn-default:active{
			opacity:0.8;
		}
		.btn-default.is-default{
			background:#16a34a;
			color:#fff;
		}
		
		.btn-delete{
			background:#fef2f2;
			color:#ef4444;
			border:0.01rem solid #fecaca;
		}
		.btn-delete:active{
			background:#fee2e2;
		}
		
		/* 添加银行卡按钮 */
		.add-bank-btn{
			width:100%;
			height:0.48rem;
			background:#fff;
			color:#253043;
			border:0.01rem dashed #e5e7eb;
			border-radius:0.12rem;
			font-size:0.15rem;
			font-weight:600;
			cursor:pointer;
			-webkit-tap-highlight-color:transparent;
			text-decoration:none;
			display:flex;
			align-items:center;
			justify-content:center;
			gap:0.08rem;
			margin-top:0.08rem;
		}
		.add-bank-btn:active{
			background:#f8f9fa;
		}
		.add-bank-btn::before{
			content:'+';
			font-size:0.24rem;
			font-weight:700;
		}
		
		/* 空状态 */
		.empty-state{
			text-align:center;
			padding:1rem 0;
		}
		.empty-icon{
			width:1.2rem;
			height:1.2rem;
			margin:0 auto 0.24rem;
			opacity:0.3;
		}
		.empty-icon img{
			width:100%;
			height:100%;
			object-fit:contain;
		}
		.empty-text{
			font-size:0.14rem;
			color:#64748b;
			margin-bottom:0.24rem;
		}
		.empty-action{
			display:inline-block;
			padding:0.1rem 0.24rem;
			background:#253043;
			color:#fff;
			border-radius:0.08rem;
			font-size:0.14rem;
			font-weight:600;
			text-decoration:none;
			-webkit-tap-highlight-color:transparent;
		}
		.empty-action:active{
			opacity:0.8;
		}
	</style>
	<script>
		// 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值
		(function(){
			var docEl = document.documentElement;
			var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
			function recalc() {
				var clientWidth = docEl.clientWidth;
				if (!clientWidth) return;
				docEl.style.fontSize = (clientWidth / 375 * 100) + 'px';
			}
			if (!document.addEventListener) return;
			window.addEventListener(resizeEvt, recalc, false);
			document.addEventListener('DOMContentLoaded', recalc, false);
			recalc();
		})();
	</script>
</head>
<body class="body">
<div class="main">
	<header id="header">
		<section class="head-b head-b1">
			<span class="u-left"><a href="javascript:history.go(-1);" class="back"><img src="/skin/img/back.png"/></a></span>
			<h1 id="t0">我的银行卡</h1>
			<div class="u-right">
				<a href="bankrecord.php" style="color:white;position: absolute;top:0;right:.2rem;" class="hSearch right" style="font-size:0.14rem;color:#253043;">变动记录</a>
			</div>
		</section>
	</header>
	
	<div class="bank-container">
		{if($msg==1)}
		<div class="bank-list">
			{loop $blist $key as $list}
			<div class="bank-card">
				<div class="bank-header">
					<div class="bank-logo">{$list[shortname]}</div>
					<div class="bank-info">
						<div class="bank-name">{$list[bankname]}</div>
						<div class="bank-holder">{$list[truename]}</div>
					</div>
					<a href="bank_edit.php?id={$list[Id]}" class="bank-edit-btn">编辑</a>
				</div>
				
				<div class="bank-number">{$list[bankcard]}</div>
				
				<div class="bank-actions">
					{if($list['type']==0)}
					<button class="bank-action-btn btn-default" data-id="{$list[Id]}" onclick="setDefault(this)">设为默认</button>
					{else}
					<button class="bank-action-btn btn-default is-default" disabled>默认银行卡</button>
					{/if}
					<button class="bank-action-btn btn-delete" data-id="{$list[Id]}" onclick="deleteBank(this)">删除</button>
				</div>
			</div>
			{/loop}
		</div>
		
		<a href="bank_add.php" class="add-bank-btn">添加银行卡</a>
		{else}
		<div class="empty-state">
			<div class="empty-icon">
				<img src="/skin/img/noBank.png" alt="" />
			</div>
			<p class="empty-text">您还未添加银行卡</p>
			<a href="bank_add.php" class="empty-action">立即添加</a>
		</div>
		{/if}
	</div>
</div>

<script>
	// 设为默认
	function setDefault(btn) {
		var id = $(btn).attr("data-id");
		$.ajax({
			type:"post",
			dataType:"json",
			url:"/Moudelu.php?m=m&a=bank_default",
			data:"id="+id,
			success:function(d){
				if(d[0]==2){
					window.location.href='login.php';
					return false;
				}
				if(d[0]==0){
					alert(d[1]);
				}
				else{
					window.location.href='/user/bank.php';
				}
			}
		});
	}
	
	// 删除银行卡
	function deleteBank(btn) {
		if(!confirm("确认删除该银行卡？")) return;
		
		var id = $(btn).attr("data-id");
		$.ajax({
			type:"post",
			dataType:"json",
			url:"/Moudelu.php?m=m&a=bank_del",
			data:"id="+id,
			success:function(d){
				if(d[0]==2){
					window.location.href='login.php';
					return false;
				}
				if(d[0]==0){
					alert(d[1]);
				}
				else{
					window.location.href='/user/bank.php';
				}
			}
		});
	}
</script>
{include(foot)}
</body>
</html>
